<template>
  <base-panel :title="title">
    <top-simple-search @searchFun="query" @addFun="toAdd">
      <el-form-item>
        <simple-select placeholder="请选择状态" v-model="formData.status"  clearable :dataList="[{name:'启用',id:1},{name:'禁用',id:0}]"></simple-select>
      </el-form-item>
    </top-simple-search>
    <simple-table ref="myTable" size="mini" api-url="systemManagement/dict" :params="{parent:id}">
      <el-table-column label="名称" align="center" prop="name" :show-overflow-tooltip="true"/>
      <el-table-column label="数据值" align="center" prop="value">
          <template slot-scope="{row}">
            {{row.value}}
          </template>
      </el-table-column>
      <el-table-column label="颜色" align="center" prop="color">
        <template slot-scope="{row}">
          <span class="color-block" :style="{background: row.color}"></span>
        </template>
      </el-table-column>
      <my-dict-column label="状态" align="center" prop="status" dist-key="button_status_bool"></my-dict-column>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
      <my-time-column label="创建时间" align="center" prop="gmt_created" width="180"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
        <template slot-scope="{row}">
          <detail-button @click="toDetail(row)"></detail-button>
          <edit-button @click="toEdit(row)"></edit-button>
          <delete-button @click="toDelete(row.id)"></delete-button>
        </template>
      </el-table-column>
    </simple-table>
    <detail-dialog v-if="visible" :visible.sync="visible" :row="currRow" @reloadList="getList" :disabled="disabled"></detail-dialog>
  </base-panel>
</template>
<script>
  import simpleTable from '@/mixins/SimpleTable'
  import DetailDialog from './DetailDialog'
  import MyTimeColumn from '@/components/TableColumn/MyTimeColumn'
  import MySwitchColumn from '../../../../components/TableColumn/MySwitchColumn'
  import MyDictColumn from '../../../../components/TableColumn/MyDictColumn'
  import DictSelect from "../../../../components/DictSelect/index";
  import SimpleSelect from "../../../../components/Common/SimpleSelect";
  // 获取登录用户信息
  export default {
    name:"userTable",
    components: {SimpleSelect, DictSelect, MyDictColumn, MySwitchColumn, MyTimeColumn, DetailDialog },
    mixins: [simpleTable],
    data() {
      return {
        roleUsersVisible: false,
        roleVisible:false,
        id:this.$route.query.id,
        apiUrl:"systemManagement/dict",
        title:this.$route.query.title,
        formData:{
          status:undefined
        }
      }
    },
    created() {
      // this.getDicts("sys_normal_disable").then(response => {
      //   this.statusOptions = response.data;
      // });
    },
    methods: {
      query(){
        this.$refs["myTable"].searchList(this.formData);
      },
    }
  }
</script>
<style lang="scss" scoped>
  .color-block{
    width: 20px;
    height: 10px;
    display: inline-block;
  }
  </style>
